<template>
  <div>
    <el-table
      :data="firstTableData"
      size="small"
      height="360"
      :row-style="{ 'background-color': 'transparent' }"
      :cell-style="{ background: 'transparent' }"
      :default-sort="{ prop: 'today' }"
      :header-cell-style="{
        'background-color': '#283979',
        border: 'none',
        'line-height': '28px',
        'text-align': 'center',
      }"
      style="width: 100%"
    >
      <el-table-column
        prop="area"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
        label="网点"
      >
      </el-table-column>
      <el-table-column prop="consum" align="center" sortable label="当天用电量">
      </el-table-column>
      <el-table-column prop="avgConsum" align="center" sortable label="日均用电量">
      </el-table-column>
      <el-table-column prop="maxConsum" align="center" sortable label="最大用电量">
      </el-table-column>
      <el-table-column prop="danger" align="center" sortable label="隐患状态">
      </el-table-column>
      <el-table-column
        prop="controlTimes"
        align="center"
        sortable
        label="控电次数"
      >
      </el-table-column>
      <el-table-column
        prop="nonworkHour"
        align="center"
        sortable
        width="120"
        label="非工作时间小时数"
      >
      </el-table-column>
      <el-table-column
        prop="load"
        align="center"
        width="120"
        sortable
        label="线路负荷"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.lineLoadA}}%/{{scope.row.lineLoadB}}%/{{scope.row.lineLoadC}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="avgPower" align="center" sortable label="平均功率">
      </el-table-column>
      <el-table-column prop="maxPower" align="center" sortable label="最大功率">
      </el-table-column>
    </el-table>
    <div style="display: inline-block; float: right; margin-right: 10px">
      <el-pagination
        :page-size="6"
        layout="total, prev, pager, next"
        :total="firstTableDatalength"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
export default {
  data() {
    return {
      firstTableDatalength:-1,
      firstTableData: [
        {
          id: 1,
          addres: "丰泽新秀社区",
          today: 986,
          dayAvg: "120",
          max: "180",
          danger: "20%",
          controlNum: "20",
          noWorkTime: "5",
          load: "2%/5%/1%",
          avgPower: "98",
          maxPower: "168",
        },
        {
          id: 2,
          addres: "泉州银行泉秀支行",
          today: 88,
          dayAvg: "22",
          max: "31",
          danger: "5%",
          controlNum: "8",
          noWorkTime: "1",
          load: "3%/1%/6%",
          avgPower: "11",
          maxPower: "36",
        },
        {
          id: 3,
          addres: "泉州大洋百货",
          today: 10050,
          dayAvg: "2006",
          max: "3400",
          danger: "30%",
          controlNum: "50",
          noWorkTime: "8",
          load: "11%/24%/5%",
          avgPower: "2400",
          maxPower: "4200",
        },
        {
          id: 4,
          addres: "幸福大厦",
          today: 4300,
          dayAvg: "600",
          max: "1500",
          danger: "18%",
          controlNum: "200",
          noWorkTime: "12",
          load: "7%/5%/4%",
          avgPower: "800",
          maxPower: "1888",
        },
        {
          id: 5,
          addres: "中心客运站",
          today: 212321,
          dayAvg: "15420",
          max: "65024",
          danger: "11%",
          controlNum: "47",
          noWorkTime: "3",
          load: "45%/75%/4%",
          avgPower: "23001",
          maxPower: "55421",
        },
      ],
    };
  },
  props: {
    querytime: {
      type: String,
    },
    queryregion: {
      type: [Number, String],
    },
  },
  computed: {},
  created() {},
  mounted() {
  
    this.getOrganEnergyUsedDetail();
  },
  methods: {
    querytTable: function (time, region) {
      let self = this;
      // console.log(time);
      // console.log(region);
    },
    getOrganEnergyUsedDetail() {
      ajax.get({
        url: this.$API.getOrganEnergyUsedDetail+"?branchId="+this.queryregion+"&date=" + this.querytime.slice(0, 10),
        data: {branchId:0,date:this.querytime},
        success: (response) => {
          let self = this;
          self.firstTableData = response.data;
          self.firstTableDatalength= response.data.length
        },
      });
    },
  },
  watch: {
    querytime(newVal, oldVal) {
      // console.log(newVal.slice(0, 10));
      // console.log(oldVal);
      this.getOrganEnergyUsedDetail();
    },
    queryregion(newVal, oldVal) {
      // console.log(newVal);
      // console.log(oldVal);
       this.getOrganEnergyUsedDetail();
    },
  },
};
</script>
<style scoped>
.el-table::before {
  height: 0px;
}
.el-table,
.el-table__body-wrapper,
.el-table__body-wrapper {
  background: initial;
}
::v-deep .el-table th > .cell {
  padding: 0;
}
</style>